<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
</head>
<body>
<nav th:replace="shared/foot :: foot" class="mui-bar mui-bar-tab">
</nav>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">车主服务</h1>
</header>
<div class="mui-content">
	<div id="slider" class="mui-slider" style="margin-top: 0">
		<div class="mui-slider-group mui-slider-loop" style="margin-top: 0">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:void(0)">
					<img  th:src="@{/img/lunbo/3.png}" />
				</a>
			</div>
			<!-- 第一张 -->
			<div class="mui-slider-item">
				<a href="javascript:void(0)">
					<img th:src="@{/img/lunbo/index.jpg}" />
				</a>
			</div>
			<!-- 第二张 -->
			<div class="mui-slider-item">
				<a href="javascript:void(0)">
					<img th:src="@{/img/lunbo/2.png}" />
				</a>
			</div>
			<div class="mui-slider-item">
				<a href="javascript:void(0)">
					<img th:src="@{/img/lunbo/3.png}" />
				</a>
			</div>
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:void(0)">
					<img th:src="@{/img/lunbo/index.jpg}" />
				</a>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>

	<!--<div class="weui-cells" style="margin-top:0px">-->
		<!--<a class="weui-cell weui-cell_access" href="javascript:;">-->
			<!--<div class="weui-cell__bd">-->
				<!--<p>选择车型</p>-->
			<!--</div>-->
			<!--<div class="weui-cell__ft">-->
			<!--</div>-->
		<!--</a>-->
	<!--</div>-->

	<div class="weui-cells">
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<p>服务分类</p>
			</div>
		</div>
	</div>
	<ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=6)}">
				<img class="indeximg" th:src="@{/img/fenlei/indexicon1.png}"/>
				<!--<span class="fa fa-ambulance" style="color: black"></span>-->
				<div class="mui-media-body">维修</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=1)}">
				<img th:src="@{/img/fenlei/indexicon2.png}" />
				<div class="mui-media-body">保养</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=2)}">
				<img th:src="@{/img/fenlei/indexicon3.png}" style="height: 25px"/>
				<div class="mui-media-body">美容</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=41)}">
				<img th:src="@{/img/fenlei/indexicon4.png}" style="height: 25px"/>
				<div class="mui-media-body">喷漆</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=42)}">
				<img th:src="@{/img/fenlei/indexicon5.png}" />
				<div class="mui-media-body">轮胎</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=3)}">
				<img th:src="@{/img/fenlei/indexicon6.png}"/>
				<div class="mui-media-body">洗车</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=48)}">
				<img th:src="@{/img/fenlei/indexicon7.png}" />
				<div class="mui-media-body">套餐</div>
			</a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			<a th:href="@{/item/item(busiid=44)}">
				<img th:src="@{/img/fenlei/indexicon8.png}" />
				<div class="mui-media-body">其他</div>
			</a>
		</li>
	</ul>
</div>

<link rel="stylesheet" type="text/css" th:href="@{/css/muicss/index.css}" />
<script type="text/javascript">

    //解决a标签失效的问题
    mui('body').on('tap','a',function(){
        window.location.href = this.href;
    });
    //轮播图
    var gallery = mui('.mui-slider');
    gallery.slider({
        interval:3000//自动轮播周期，若为0则不自动播放，默认为0；3000
    });

    $(document).ready(function () {
        var storage=window.localStorage;
        storage.clear();
    })

</script>

</body>
</html>
